<template>
  <div class="body vertical center ">
    <!-- 提款列表选择 -->
    <div :class="`flex space_between item_list ${item.status === 0 ? 'wh_item' : ''}`" v-for="(item, index) in typeList"
      :key="index">
      <div v-if="item.status === 0" class="bank_wh">
        <ImgT class="close mr-4" src="/imgs/payment/wh_bank.webp" />
        <span>{{ t('addBank_page_bankPay_wh') }}</span>
      </div>
      <div class="flex align_center item_list_l">
        <div class="bank_icon">
          <ImgT :src="`/imgs/payment/bindCard/${item.payname}.webp`" />
        </div>
        <div class="bank-txt">
          <div class="flex bank_name">
            <span class="bank_payName">{{ t(`${item.text}`) }}</span>
            <a class="wh-icon" @click="onCloseSm"></a>
          </div>
          <div class="bank_limit">{{ item.min_withdraw_money }} ~ {{ item.max_withdraw_money }}</div>
        </div>
      </div>
      <div class="item_list_r">
        <a class="button_color" @click="chooseWay(item)"> {{ t('deposit_page_use') }} </a>
      </div>
    </div>

    <!-- 提款说明 -->
    <nut-dialog class="deposit_sm_modal" :visible="showSmModal" :mask-closable="false">
      <div class="form_card">
        <div class="form_container vertical">
          <div class="header rel center">
            <span class="weight_5 ">{{ t('withdraw_page_instructions') }}</span>
            <span class="close abs center pointer ">
              <Close @click="onCloseSm" icon-id="Group39368" color="#fff" size="1.5em" />
            </span>
          </div>
          <div class="body vertical center ">
            <div class="flex align_center justify_center sm_txt">
              <span>占位图</span>
            </div>
            <div class="flex space_between bank_list_item">
              <a v-for="(item, index) in usdtRecharge" :key="index">
                <ImgT :src="`/imgs/payment/icon/icon_${item.payname}.webp`" />
              </a>
            </div>
          </div>
        </div>
      </div>
    </nut-dialog>


  </div>
</template>

<script setup lang='ts'>
import { useI18n } from "vue-i18n";
import { onMounted, onUnmounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { Net } from '@/net/Net';
import { MessageEvent2 } from '@/net/MessageEvent2';
import { NetPacket } from '@/netBase/NetPacket';
import { NetMsgType } from '@/netBase/NetMsgType';
import { Close } from '@nutui/icons-vue';
import { showToast } from '@nutui/nutui';
import { Local } from "@/utils/storage";


const { t } = useI18n();
const router = useRouter();
const showSmModal = ref(false);
const usdtRecharge = ref<any>(); // 提款银行列表
const typeList = reactive<any>([
  {
    payname: 'bankcard_0',
    text: 'bankcard',
    min_withdraw_money: null,
    max_withdraw_money: null,
    status: null,
  },
  {
    payname: 'usdt',
    text: 'usdt',
    min_withdraw_money: null,
    max_withdraw_money: null,
    status: null,
  },

]); // 提款列表
const curWithdrawWay = ref({ payname: '' }); // 当前选择的提款方式

// 提款方式列表

// 获取银行卡信息
const getBankInfo = () => {
  const req = NetPacket.req_bank_card_info_list();
  Net.instance.sendRequest(req);
}
const handleBankInfoRes = (rs: any) => {
  console.log('666', rs)
  typeList[0].min_withdraw_money = rs.min_withdraw_money
  typeList[0].max_withdraw_money = rs.max_withdraw_money
  typeList[0].status = rs.bank_card_maintain_status
  typeList[1].status = rs.usdt_maintain_status
  typeList[1].min_withdraw_money = rs.min_usdt
  typeList[1].max_withdraw_money = rs.max_usdt
};
// 获取usdt信息
const getUSDTInfo = () => {
  const req = NetPacket.req_usdt_info_list();
  Net.instance.sendRequest(req);
}
const handleUSDTInfoRes = (rs: any) => {
  console.log('777', rs)
  // typeList[0].min_withdraw_money = rs.min_withdraw_money
  // typeList[0].max_withdraw_money = rs.max_withdraw_money
  // typeList[1].status = rs.usdt_info_list.length > 0 ? 1 : 0
  // typeList[1].min_withdraw_money = rs.min_usdt
  // typeList[1].max_withdraw_money = rs.max_usdt
};

const onCloseSm = () => {
  // showSmModal.value = !showSmModal.value
}
// 去提款
const goToWithdraw = () => {
  if (!curWithdrawWay.value.payname) {
    return showToast.fail(t('method_error'));
  }
  router.push(`/withdrawalNext`);
}
// 选择提款方式
const chooseWay = (data: any) => {
  Local.set('curWithdrawWay', data);
  // form.value.method = data.paymenttype
  curWithdrawWay.value = data;
  goToWithdraw();
}

onMounted(() => {
  getBankInfo();
  getUSDTInfo();
  // 获取银行信息
  MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_bank_card_info_list, handleBankInfoRes);
  MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_usdt_info_list, handleUSDTInfoRes);
})
onUnmounted(() => {
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_bank_card_info_list, null);
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_usdt_info_list, null);
})

</script>

<style lang='scss' scoped>
.body {
  height: 100vw;
  padding: 10px;
  color: #fff;
  font-size: 14px;

  .item_list {
    position: relative;
    display: flex;
    justify-content: space-between;
    border-radius: 12px;
    height: 56px;
    padding: 10px 14px;
    background: #131232;
    box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
    margin-bottom: 8px;
    border: 1px solid #2E296B;

    &.active {
      background-image: url(/imgs/payment/listBg_active.webp);
    }

    &.wh_item {
      pointer-events: none;
    }

    .bank_wh {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      background: rgba(0, 0, 0, .7);
      width: 100%;
      height: 100%;
      border-radius: 8px;
      top: -3px;
      left: -3px;

      img {
        width: 24px;
      }
    }

    .item_list_l {
      display: flex;
      align-items: center;

      .bank_icon {
        margin-right: 10px;

        img {
          width: 36px;
          height: 36px;
        }
      }

      .bank-txt {
        .bank_name {
          display: flex;
          color: #fff;

          .bank_payName {
            max-width: 160px;
            min-width: 60px;
          }

          .wh-icon {
            margin-left: 5px;
            width: 16px;
            height: 16px;
            background: url(/imgs/payment/wh.webp) center no-repeat;
            background-size: 100%;
          }
        }

        .bank_limit {
          font-size: 12px;
          color: #ED8302;
        }
      }
    }

    .item_list_r {
      a {
        display: inline-block;
        text-align: center;
        width: 64px;
        height: 32px;
        line-height: 32px;
      }
    }

  }
}
</style>